<template>
  <div class='container'>
    <div class='mydiv'></div>
    <el-dialog :title="form.id ? '修改': '新增'" :visible="isShowPreview" @open='open' @close='closeShowPreview'>
    <el-form :model="form"  :rules='rules'  ref="formList">
          <el-form-item label="文章标题" prop="title">
            <el-input placeholder='请输入文章标题' v-model="form.title" ></el-input>
          </el-form-item>
           <el-form-item label="文章内容" prop="articleBody">
             <div id="div1" ></div>
           </el-form-item>
           <el-form-item label="视频地址" prop="videoURL">
            <el-input placeholder='请输入视频地址' v-model="form.videoURL"></el-input>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click='closeShowPreview'>取 消</el-button>
        <el-button type="primary" @click='determine'>确 定</el-button>
      </div>
</el-dialog>
  </div>
</template>

<script>
import E from 'wangeditor'
import { add, update } from '@/api/hmmm/articles.js'
export default {
  name: 'articlesPreview',
  props: {
    isShowPreview: {
      type: Boolean,
      default: false
    },
    curentId: { // 当前操作的id
      type: Number,
      default: 0
    },
    AmodifyList: {
      type: Object,
      default: () => {
        return {}
      }
    }

  },
  data () {
    return {
      editor: null, // 富文本
      form: {
        title: '',
        articleBody: '',
        videoURL: ''

      },
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        articleBody: [
          { required: true, message: '请输入内容', trigger: 'blur' },
          { min: 3, max: 999, message: '长度在3个字符以上', trigger: 'blur' }
        ]
      }

    }
  },

  methods: {
    async open () {
      await this.$nextTick()
      this.loadRichText()
      this.form = this.AmodifyList
    },
    // 关闭弹窗
    closeShowPreview () {
      console.log(123)
      this.editor.destroy()
      this.$refs.formList.resetFields()
      this.form = {
        title: '',
        articleBody: '',
        videoURL: ''
      }

      this.$emit('closeShowPreview')
    },
    loadRichText () {
      const editor = new E('#div1')
      editor.config.height = 200
      editor.config.onchange = (newHtml) => {
        this.form.articleBody = newHtml
      }

      editor.create()
      if (this.form.id) {
        editor.txt.append(this.form.articleBody)
      } else {
        this.form = {
          title: '',
          articleBody: '',
          videoURL: ''
        }
      }
      this.editor = editor
    },
    determine () { // 确定按钮
      this.$refs.formList.validate(async valid => {
        if (valid) {
          if (this.form.id) {
            await update(this.form)
          } else {
            await add({ title: this.form.title, articleBody: this.form.articleBody, videoURL: this.form.videoURL })
            console.log('添加')
          }
          this.$message.success(
            this.form.id ? '修改成功' : '新增文章成功'
          )
          this.closeShowPreview()
        }
      })
    }

  }

}
</script>

<style scoped>

div /deep/ .el-form-item--medium {
  width: 100%;

  margin-left: 0;
}
div /deep/ .el-form-item__content, .el-input--medium, .el-input__inner {
  width: 90%;
}

</style>
